<template>
  <div class="variable-item">
    <div v-for="(variable, index) in list" :key="index" class="var">
      <div style="display: flex; align-items: center" @dblclick="addVariable(variable)">
        <img alt="" class="var-icon" src="@/assets/images/variable.png" />
        <div class="var-name">{{ variable.name }}</div>
        <div v-if="variable.doc_tags" class="suffix">Word捕获</div>
      </div>
      <img alt="" class="var-icon-location" src="@/assets/images/location.png" @click="goAnchor(variable.pid)" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'VariableItem',
    props: {
      list: {
        type: Array,
        default() {
          return []
        },
      },
    },
    methods: {
      addVariable(variable) {
        this.$emit('add-var', variable)
        // if (variable.pid) {
        // } else {
        // }
      },
      goAnchor(id) {
        // 有pid跳相应步骤，无pid跳到表单
        this.$emit('go-anchor', id ? id : 'parameters')
      },
    },
  }
</script>

<style scoped lang="scss">
  .var {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 5px;
    line-height: 21px;

    .var-icon,
    .var-icon-location {
      width: 12px;
      height: 12px;
      margin-right: 5px;
      vertical-align: baseline;
    }

    .var-icon-location {
      cursor: pointer;
      margin-right: 15px;
    }

    .var-name {
      font-size: 12px;
      cursor: pointer;
    }

    .suffix {
      margin-left: 5px;
      font-size: 7px;
    }
  }
</style>
